<template>
	<el-form class="login-content-form">
		<el-form-item label = "">
			<el-input
				type="text"
				placeholder="Input your username"
				prefix-icon="el-icon-user"
				v-model="user.username"
				clearable
				autocomplete="off"
                size = "50"
			>
			</el-input>
		</el-form-item>
        <el-form-item label = "">
			<el-input
				type="text"
				placeholder="Input your company name"
				prefix-icon="el-icon-s-check"
				v-model="user.company"
				clearable
				autocomplete="off"
                size = "10"
			>
			</el-input>
		</el-form-item>
        <el-form-item label = "">
			<el-input
				type="text"
				placeholder="Input your email address"
				prefix-icon="el-icon-message"
				v-model="user.email"
				clearable
				autocomplete="off"
			>
			</el-input>
		</el-form-item>
        <el-form-item label = "">
			<el-input
				type="password"
				placeholder="Input your password"
				prefix-icon="el-icon-lock"
				v-model="user.password"
				clearable
				autocomplete="off"
				show-password
			>
			</el-input>
		</el-form-item>
        <el-form-item label = "">
			<el-input
				type="password"
				placeholder="Confirm your password"
				prefix-icon="el-icon-lock"
				v-model="user.confirmedPassword"
				clearable
				autocomplete="off"
				show-password
			>
			</el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" class="login-content-submit" round @click="register">
				<span>Register Account</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
import loginApi from '/@/api/login/index.ts';
export default defineComponent({
	name: 'register',
	setup() {
		const state = reactive({
			ruleForm: {
				userName: '',
				code: '',
			},
        });
        
		return {
			...toRefs(state),
		};
    },
    data(){
        return {
            user:{
                username:"",
                company : "",
                email:"",
                password:"",
                confirmedPassword:""
            }

        };
    },
    methods:{
        register(){

			if(this.username ==""){
				ElMessage.error('username is mondatory');
				return;
			}

			if(this.user.password ==''){
				ElMessage.error('password is mondatory');
				return;
			}

			if(this.user.confirmedPassword ==''){
				ElMessage.error('confirmed password is mondatory');
				return;
			}

			if(!(this.user.confirmedPassword == this.user.password)){
				ElMessage.error('confirmed password is different from password');
				return;
			}

            loginApi.register(this.user).then(response=>{
                if(response.status){
                    ElMessage.success('Register Success');
                }else{
                    ElMessage.error('Register failed, caused by ' + response.message);
                }
            });
            // alert(JSON.stringify(this.user));
            
        },
    }
});
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;
	::v-deep(.el-input__icon) {
		display: inline-block;
	}
	.login-content-code {
		width: 100%;
		padding: 0;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 200;
		margin-top: 15px;
	}
}
</style>
